<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页音频播放器</title>
</head>
<body>
    <div id="music">
        <audio id="myAudio" controls src="../js/res/向剑林,郭静1米78 - 缘分一道桥.mp3" preload="metadata"></audio>
        <div class="btns">
            <button id="play">播放</button>
            <button id="muted">静音</button>
            <input type="range" id="volBth" min="0.0" max="1.0" step="0.1" value="0.5">音量
        </div>
    </div>
</body>
<script>
    var oAudio = document.getElementById("myAudio");
    var oPlay = document.getElementById("play");
    var oMuted = document.getElementById("muted");

    //播放
    oPlay.addEventListener('click',function(){
        if(oAudio.paused){
            oAudio.play();
            oPlay.innerText = '暂停';
        }else{
            oAudio.pause();
            oPlay.innerText = '播放';
        }
    },false);
    
    //静音
    oMuted.addEventListener('click',function(){
        oAudio.muted = !oAudio.muted;
    },false);

    //调节音量
    volBth.addEventListener('change',function(){
        oAudio.volume = this.value;
    },false);
</script>
</html>